<template>
    <div class="up-video-player">
        <!-- 直播未开始 -->
        <pre-play v-show="mix_liveStatus === 1" :cover-url="coverUrl"></pre-play>
        <template v-if="mix_liveStatus === 1"></template>
        <!-- /直播未开始 -->

        <!-- 直播已开始或者已结束 -->
        <template v-else-if="mix_expection">
            <component :is="player" ref="playRef" :control-hide="controlHide" :play-url="playUrl" :cover-url="coverUrl"
                :status="status" @play="play"></component>
            <span v-show="isReplay && mix_playback" class="up-video-player__playback-label"> 回放 </span>
        </template>
        <!-- /直播已开始或者已结束 -->

        <!-- 其他状态 -->
        <template v-else>
            <img class="up-video-player__cover" :src="coverUrl" alt="poster" />
        </template>
        <!-- /其他状态 -->
        <div v-if="isReplayGenerated" class="playback-generated">直播已结束 {{ mix_playback ? '，回放生成中' : '' }}</div>

        <!-- 播放按钮 -->
        <play-btn v-show="playerIconShow && !isReplayGenerated" @click.native="play"></play-btn>
        <!-- /播放按钮 -->
    </div>
</template>

<script>
import { audItStatusMap, liveStatusMap } from '@/enums/live';
import { streamStatusMap } from '@/enums/streamStatus';
import liveInfo from '@/mixins/liveInfo';
import streamInfo from '@/mixins/streamInfo';
import defaultVPoster from '@/static/images/live/default-poster-v.png';
import { Toast } from 'vant';
import PlayBtn from './_play-btn.vue';
import PrePlay from './_pre-play.vue';
import TcplayVideo from './_tcplay-video';
import liveSetting from '@/mixins/liveSetting';

export default {
    name: 'UpVideoPlayer',
    components: {
        PlayBtn,
        PrePlay,
        TcplayVideo,
    },
    mixins: [liveInfo, streamInfo, liveSetting],
    data() {
        return {
            playerInstance: null, // 播放器实例
            playIconClicked: false, // 是否已播放过
            isPlay: false
        };
    },
    computed: {
        player() {
            return 'tcplay-video';
        },
        living() {
            // 是否直播中
            return (
                this.mix_liveStatus === liveStatusMap['直播中'] &&
                this.mix_streamStatus === streamStatusMap['直播中']
            );
        },
        status() {
            return [this.mix_liveStatus, this.mix_streamStatus];
        },
        playUrl() {
            return this.mix_playUrl;
        },
        coverUrl() {
            return this.mix_liveInfo?.cover || defaultVPoster;
        },
        canPlay() {
            const [liveStatus, streamStatus] = this.status;
            if (liveStatus === undefined || streamStatus === undefined) {
                return false;
            }
            if (liveStatus === liveStatusMap['直播中'] && streamStatus === streamStatusMap['直播中']) {
                return true;
            }
            if ([liveStatusMap['直播暂停'], liveStatusMap['已结束']].includes(liveStatus)) {
                return true;
            }

            return false;
        },
        // 播放按钮是否显示
        playerIconShow() {
            // 直播状态为未开始, 显示按钮, 点击弹窗显示直播未开始
            if (this.mix_liveStatus === liveStatusMap['未开始']) {
                return true;
            }
            // 直播异常发生时候
            if (this.mix_exception) {
                return false;
            }
            // 播放按钮已经点击过 不再显示播放按钮
            if (this.playIconClicked) {
                return false;
            }
            return true;
        },
        controlHide() {
            return this.playerIconShow;
        },
        // 回放生成中
        isReplayGenerated() {
            if (this.mix_streamInfo?.playBackUrl) {
                return false;
            } else {
                if (
                    this.status[0] === liveStatusMap['已结束'] ||
                    this.status[0] === liveStatusMap['直播暂停']
                ) {
                    return true;
                }
            }
            return false;
        },
        isReplay() {
            return (
                [liveStatusMap['直播暂停'], liveStatusMap['已结束']].includes(this.mix_liveStatus) &&
                this.playUrl
            );
        },
    },
    watch: {
        isReplayGenerated: {
            handler(v) {
                console.log(v)
                if (v) {
                    this.playerInstance.player.dispose()
                }
            }
        },
        mix_liveId: {
            handler(v) {
                if (v) {
                    this.mix_subscribestreamStatus(v);
                    this.fetchstreamInfo(v);
                    // this.getLiveRoat(v)
                    // this.mix_replayGenerated(v)
                }
            },
            immediate: true, // 进入页面也立即执行
        },
        // 监听异常情况发生
        mix_exception(val) {
            if (val) {
                Toast({
                    duration: 5000,
                    message: '主播离开一会',
                });
            }
        },

        canPlay: {
            // 监听直播状态和直播流状态都为正常的才去实例化相应的播放器
            async handler(val) {
                if (val) {
                    await this.$nextTick();
                    if (!this.playerInstance) {
                        this.playerInstance = this.$refs.playRef;
                        this.playerInstance.initPlayer();
                    }
                }
            },
            immediate: true, // 进入页面也立即执行
        },
    },
    methods: {
        fetchstreamInfo(liveId) {
            this.$store.dispatch('live/fetchstreamInfo', liveId);
        },
        play() {
            if (this.mix_auditStatus === audItStatusMap['封禁']) {
                this.$toast('直播已封禁');
                return;
            }
            this.isPlay = true
            this.playIconClicked = true;
            this.playerInstance.play();
        },
    },
};
</script>

<style lang="scss" scoped>
.up-video-player {
    position: relative;
    width: 100%;
    height: 100%;
}

.up-video-player__playback-label {
    position: absolute;
    top: 64px;
    left: 8px;
    z-index: 2;
    width: 40px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background: rgba($color: #000, $alpha: 0.3);
    // opacity: 0.3;
    border-radius: 10px;
}

.playback-generated {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% - 229px);
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.up-video-player__cover {
    width: 100%;
    height: 100%;
}

._code_Rate {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 220;
    display: block;
    width: 58px;
}
</style>